function createCurrentLocation(base) {
    // prototcl://username:password@host:port/pathname + search + hash
    const { pathname, search, hash } = window.location


    let pos = base.indexOf('#');
    if(pos > -1){
        return hash.slice(1) || '/'; // 取的是hash路径
    }

    return pathname + search + hash
}
function buildState(back, current, forward, replaced = false, computedScroll = false) {
    return {
        back,
        current,
        forward,
        replaced,
        computedScroll: computedScroll ? { x: window.pageXOffset, y: window.pageYOffset } : {},
        position: window.history.length - 1
    }
}
function useHistoryStateNavigation(base) { // 构建当前的路径信息和状态
    const { history, location } = window;
    // vue ref
    let currentLocation = {
        value: createCurrentLocation(base)
    }
    let historyState = { // 当前的路径信息
        value: history.state
    }
    if (!historyState.value) {
        // 根据页面构建出 初始状态, 将状态同步到路由中去 
        changeLocation(currentLocation.value, buildState(null, currentLocation.value, null, true), true)
    }
    function changeLocation(to, state, replaced = false) {
        const pos = base.indexOf('#');
        to = pos > -1 ? base + to : to
        window.history[replaced ? 'replaceState' : 'pushState'](state, null, to)
        historyState.value = state;
    }
    function push(to, state) { // 跳转
        const currentState =
            Object.assign({},
                historyState.value,
                {
                    forward: to,
                    computedScroll: { x: window.pageXOffset, y: window.pageYOffset }
                });

        // 跳转前   , 先将state更新到historyState中
        changeLocation(currentState.current, currentState, true);
        // 跳转后
        const nextState = Object.assign(
            {},
            buildState(currentState.current, to, null),
            state
        )
        changeLocation(to, nextState);
        currentLocation.value = to;// 更新跳转路径   ---- push
    }
    function replace(to, state) {
        const currentState =
            Object.assign({},
                buildState(historyState.value.back, to, historyState.value.forward),
                state
            );
        changeLocation(to, currentState, true);
        currentLocation.value = to;// 更新跳转路径 ---- replace
    }
    return {
        location: currentLocation, // 当前路径状态
        state: historyState, // 浏览器历史的信息状态
        push,
        replace
    }
}


function useHistoryListeners({ location, state: historyState },base) {
    let listeners = []

    const handler = ({ state }) => {
        const to = createCurrentLocation(base); // 获取跳转后的路径
        const from = location.value;
        const fromState = historyState.value
        location.value = to; // 更改后当前的 状态需要更新
        historyState.value = state;
        listeners.forEach(callback => callback(to,from , {}))
    }
    window.addEventListener('popstate', handler); // 用户前进后退的逻辑  
    function listen(callback) {
        listeners.push(callback)
    }
    return {
        listen
    }
}

export function createWebHistory(base = '') {
    const historyNavigation = useHistoryStateNavigation(base); // 当前路径是什么，数据是什么
    const historyListeners = useHistoryListeners(historyNavigation,base);
    const routerHistory = Object.assign({}, historyNavigation, historyListeners)
    return routerHistory;
}
export function createWebHashHistory(){
    return createWebHistory('#')
}
